<template>
	<view>
		<view class="pp20 f13">
			<view class="fj">
				<view class="">
					<text class="c84 mr10">姓名</text> {{form.name}}
				</view>
				<view class="">
					<text class="c84 mr10">性别</text> {{setStatus(form.gender)}}
				</view>
				<view class="">
					<text class="c84 mr10">年龄</text> {{form.age}}岁
				</view>
			</view>

			<!-- 			<view class="mt10" v-if="false">
				<text class="c84 mr10">诊断</text>
				{{ form.diagnose || 'css 省略号表示溢出文本，可以通过设置不同的属性来实现。例如，可以使用overflow: hidden、text-overflow: ellipsis、text-overflow: ellipsis来实现。另外，也可以使用webkit-line-clamp和display: -webkit-box来实现多行文本溢出显示省略号的效果。需要注意的是，设置文本溢出限定的宽度会隐藏溢出内容的文本，因此需要在溢出内容周围设置一些边界'}}
			</view> -->

			<view class="mt10  " style="display: flex;">
				<text class="c84 mr10">主诉</text>
				<view class="">
					<textarea name="" disabled v-model="form.description" placeholder="" id="" cols="30" rows="10"
						style="font-size: 24rpx;background-color: #F5F5F5;
					padding: 20rpx;border-radius: 10rpx;padding-bottom: 50rpx;"></textarea>
				</view>
			</view>

			<view class="mt10  " style="display: flex;">
				<text class="c84 mr10">诊断</text>
				<view class="">
					<textarea name="" disabled v-model="form.diagnose" placeholder="" id="" cols="30" rows="10" style="font-size: 24rpx;background-color: #F5F5F5;
					padding: 20rpx;border-radius: 10rpx;padding-bottom: 50rpx;"></textarea>
				</view>
			</view>


			<view class="mt10  " style="display: flex;">
				<text class="c84 mr10">医嘱</text>
				<view class="">
					<textarea name="" disabled v-model="form.consultationSuggestion" placeholder="" id="" cols="30"
						rows="10" style="font-size: 24rpx;background-color: #F5F5F5;
					padding: 20rpx;border-radius: 10rpx;padding-bottom: 50rpx;"></textarea>
				</view>
			</view>

			<view class="mt10  ">
				<text class="c84 mr10">用药</text>
				<view class="">
					<textarea name="" disabled v-model="form.medicationSuggestion" placeholder="" id="" cols="30"
						rows="10" style="font-size: 24rpx;background-color: #F5F5F5;
					padding: 20rpx;border-radius: 10rpx;padding-bottom: 50rpx;"></textarea>
				</view>
			</view>

			<!-- 药品 -->
			<view class="">
				<!-- 标题 -->
				<view class="mt10">
					<text class="c84 mr10">药品</text>
				</view>
				<!-- 内容 -->
				<view class="mt10"
					style="background-color: #EFF5FF; min-height: 180rpx;border-radius: 10rpx;padding: 40rpx;">
					<view class="">
						<view class="fa f14">
							<image src="/static/online/yao.png" mode="widthFix" style="width: 100rpx;" class="mr10">
							</image>
							<view class=" f1">
								<view class="fa">
									<view class=" f1">
										云南白药蒲地蓝消炎片
									</view>
									<view class="">
										￥48.00
									</view>
								</view>
								<view class="mt5 fa">
									<view class="f1">
										0.3g*20片*3板
									</view>
									<view class="">
										x1
									</view>
								</view>
							</view>
						</view>
						<view class="c84 mt10">
							用法用量：每日3次，每次10.0毫升，饭后服用
						</view>
					</view>
					<view class="mt30">
						<view class="fa f14">
							<image src="/static/online/yao.png" mode="widthFix" style="width: 100rpx;" class="mr10">
							</image>
							<view class=" f1">
								<view class="fa">
									<view class=" f1">
										云南白药蒲地蓝消炎片
									</view>
									<view class="">
										￥48.00
									</view>
								</view>
								<view class="mt5 fa">
									<view class="f1">
										0.3g*20片*3板
									</view>
									<view class="">
										x1
									</view>
								</view>
							</view>
						</view>
						<view class="c84 mt10">
							用法用量：每日3次，每次10.0毫升，饭后服用
						</view>
					</view>
				</view>
			</view>

			<!-- 计算 -->
			<view class="fa f12 mt10">
				<view class="f1">
					合计 共2件
				</view>
				<view class="f16" style="color: #F8662D;">
					￥63.00
				</view>
			</view>



			<!-- 提示 -->
			<view class="mt30">
				<view class="f13 c84">
					特别提示
				</view>
				<view class=" f13 c84">
					<view class="mt5">
						1. 处方有效期24小时内有效，请提醒患者及时取药。
					</view>
					<view class="mt5">
						2. 本处方仅限于医健通互联网医院使用。
					</view>
					<view class="mt5">
						3.如果您对处方有任何疑问，请拨打124121212，联系平台客服进行处理。
					</view>
				</view>
			</view>
		</view>

		<!-- 		<view class="fa mt50">
			<button @click="back" style=" background-color: transparent;width: 240rpx;height: 90rpx;border: 1rpx solid #CCCCCC;border-radius: 50rpx;
			font-size: 30rpx;line-height: 90rpx;">返回修改</button>
			<button @click="back" style="background-color: #2D81FF;color: white;font-size: 30rpx;width: 380rpx;height: 90rpx;line-height: 90rpx;
			border-radius: 50rpx;">确认并发送给患者</button>
		</view> -->


	</view>
</template>

<script>
	export default {
		data() {
			return {
				word: "css 省略号表示溢出文本， 可以通过设置不同的属性来实现。 例如， 可以使用overflow: hidden、 text - overflow: ellipsis、 text -overflow: ellipsis来实现。 另外， 也可以使用webkit - line - clamp和display: -webkit -box来实现多行文本溢出显示省略号的效果。 需要注意的是， 设置文本溢出限定的宽度会隐藏溢出内容的文本， 因此需要在溢出内容周围设置一些边界 ",
				form: {
					"consultationSuggestion": "",
					"description": "",
					"diagnose": "",
					"isLongtime": false,
					"isMoveDifficult": false,
					"medicationSuggestion": "",
					"productList": [{
							"count": 1,
							"uproductid": "1659088089214132224"
						},
						{
							"count": 2,
							"uproductid": "1659088352125689856"
						},
					],
					"userid": "",
					"name": "",
					"gender": "",
					"avatar": "",
					"avatar": "",
					"age": "",
				}
			}
		},
		onShow() {

		},
		onLoad(options) {
			let data = JSON.parse(options.data)
			this.form = data
		},
		methods: {
			setStatus(status) {
				let obj = {
					1: "男",
					2: "女"
				}
				return obj[status]
			},
			/* 搜索返回 */
			back() {
				/*uni.navigateBack({
					delta: 1
				})*/
				//@zxyuns 处理兼容，如果没有上一级界面则返回首页
				const pages = getCurrentPages();
				if (pages.length === 2) {
					uni.navigateBack({
						delta: 1
					});
				} else if (pages.length === 1) {
					uni.switchTab({
						url: '/pages/index/index',
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},

		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 200rpx;
	}

	.fj {
		display: flex;
		justify-content: space-between;
	}
</style>